<template>
	<view>
		<!-- 搜索 -->
		<view class="bg-white w-100 p-20 border-box">
			<view class="flex align-center p-20 border-box w-100 search-box">
				<view class="align-center" @click="toSearch">
					<image src="/static/index/search.png" class="search"></image>
				</view>
				<view class="position-r flex-1 m-l-10">
					<input type="text" @click="toSearch" readonly placeholder='搜新闻' border="none" class="search-text" />
				</view>
			</view>
		</view>
		<!-- tab -->
		<view class="bg-white" v-if="tabList.length">
			<u-tabs :current="current" :list="tabList" keyName="className" lineColor="#e60000" :activeStyle="{color:'#000000',fontWeight:'bold'}" :itemStyle="{fontSize:'14px',height:'50px'}" @click="tabClick" />
		</view>
		<!-- 内容 -->
		<view class="p-20 border-box">
			<view v-for="(item,index) in articleList" :key="index">
				<!-- 文本 -->
				<view class="contentBox w-100 b-r-10 p-20 m-b-10" v-if="item.newsType == 'text'">
					<view class="color-b font-16 font-b" @click="toDetail(item)">{{ item.title }}</view>
					<view class="w-30 flex justify-between m-t-5 color-gray font-12">
						<view>{{item.authorName}}</view>
						<view>{{item.browseCount}}浏览</view>
					</view>
				</view>
				<!-- 视频 -->
				<view class="bg-white w-100 b-r-10 p-20 m-b-10" v-if="item.newsType == 'video'">
					<view class="color-b font-16 font-b" @click="toDetail(item)">{{ item.title }}</view>
					<view class="w-100 m-t-10 videoBox">
						<video :id="'video'+(index)" class="w-100 h-100 videoContent b-r-10" object-fit="contain" @play="seeVideo(item,index)" :src="item.video" :poster="item.videoPoster" />
					</view>
					<view class="w-30 flex justify-between m-t-5 color-gray font-12">
						<view>{{item.authorName}}</view>
						<view>{{item.browseCount}}浏览</view>
					</view>
				</view>
				<!-- 文章 -->
				<view class="bg-white w-100 b-r-10 p-20 m-b-10" v-if="item.newsType == 'article'">
					<view class="color-b font-16 font-b" @click="toDetail(item)">{{ item.title }}</view>
					<view class="w-100 m-t-10 flex" v-if="item.coverUrls.length>1">
						<image class="imgAll imgBox b-r-10" v-for="(item,index) in item.coverUrls" :key="index" :src="item" />
					</view>
					<view class="w-100 m-t-10 flex" v-else-if="item.coverUrls.length===1">
						<image class="w-100 b-r-10" :src="item.coverUrls[0]" mode="widthFix" />
					</view>
					<view class="w-30 flex justify-between m-t-5 color-gray font-12">
						<view>{{item.authorName}}</view>
						<view>{{item.browseCount}}浏览</view>
					</view>
				</view>
			</view>
			<!-- 空数据 -->
			<empty text="暂无数据" :show="articleList.length == 0" />
		</view>
	</view>

</template>

<script>
	import { getNewsList, getNewsClassify, searchNewsDetail } from '@/common/api/news.js';
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				articleList:[],
				tabList: [],
				total: null,
				current: 0,
				// 文章
				queryParmasArticle:{
					pageNo: 1,
					pageSize: 10,
					title: null,
					classId: null
				},
				// 分类
				queryParmasClassify:{
					pageNo: 1,
					pageSize: 200
				},
				videoContext: [],//视频
			};
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		onShow(){
			this.getNewsClassifyListData()
		},
		mounted(){
			uni.$on('loadPage',()=>{
				this.getNewsListData()
			})
		},
		// 刷新
		onPullDownRefresh() {
			this.getNewsClassifyListData()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if(this.articleList.length >= this.total){
				return
			}else{
				this.queryParmasArticle.pageNo++
				this.getNewsListData()
			}
		},
		methods: {
			seeVideo(data,index){
				this.videoContext.forEach((item,inx) => {
					if(index !== inx){
						this.videoContext[inx].pause()
					}
				})
				searchNewsDetail(data.newsId).then(res => {
					this.getNewsListData()
				})
			},
			// 新闻列表
			getNewsListData(){
				getNewsList(this.queryParmasArticle).then( res => {
					if(res.code === 200){
						if(res.data.length){
							res.data.forEach(item => {
								item.coverUrls = item.coverUrls?.split(',')||[];
							})
						}
						if(this.queryParmasArticle.pageNo === 1){
							this.articleList = res.data
						}else{
							this.articleList = this.articleList.concat(res.data)
						}
						// 初始化视频
						this.videoContext = [];
						this.createVideo()
						this.total = res.extend.total
					}
				})
			},
			createVideo(){
				this.articleList.forEach((item,index) => {
					this.videoContext.push(uni.createVideoContext('video'+index));//创建视频实例指向video
				})
			},
			// 分类列表
			getNewsClassifyListData(){
				getNewsClassify(this.queryParmasClassify).then(res => {
					if(res.code === 200){
						this.tabList = res.data
						this.current = Number(uni.getStorageSync('newsIndex')||0)
						this.queryParmasArticle.classId = res.data[this.current].classId
						this.getNewsListData()
					}
				})
			},
			//跳转
			toSearch(){
				uni.navigateTo({
					url: '/pages/search/index?type=news'
				})
			},
			// 搜索
			searchConfirm(){

			},
			// tab点击
			tabClick(e){
				this.current = e.index
				uni.setStorageSync('newsIndex', this.current)
				this.articleList = []
				this.queryParmasArticle.classId = e.classId
				this.queryParmasArticle.pageNo = 1
				this.getNewsListData()
			},
			// 详情
			toDetail(data){
				if(data.newsType === 'video'){
					return
				}
				uni.navigateTo({
					url: '/pages/news/detail?id='+data.newsId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #FFF;
	min-height: 100vh;
}
.videoBox{
	width:670rpx;
	height: 384rpx;
}
.header-bg {
  padding: 2% 4%;
  box-sizing: border-box;
}
.contentBox{
	background: linear-gradient(90deg, #FFE2E2, #FFFEFE);
}
.imgBox{
	margin-right: 30rpx;
}
.imgBox:nth-child(3n+3){
	margin-right: 0;
}
.imgAll{
	width: 230rpx;
	height: 230rpx;
}
.search-box {
	border-radius: 37rpx;
	border: 2rpx solid #787878;
	height: 80rpx;
}
.search-text::placeholder{
	color: gray;
	font-size: 13px;
}
.search {
	width: 29rpx;
	height: 33rpx;
}
.search-text {
	// width: 474rpx;
	width: 100%;
	font-size: 26rpx;
	height: 73rpx;
	line-height: 80rpx !important;
	display: block;
}
::v-deep .u-search__content{
	background-color: #ffffff !important;
}
::v-deep .u-search__content__input{
	background-color: #ffffff !important;
}
</style>